@import '../../../style//job.scss';
.post-box{
    margin: 24rpx 0;
    position: relative;
    .post-img{
        width: 100%;
        border-radius: 16rpx;
    }
    .post-img-active{
        filter: grayscale(1);
    }
   
    .post-describe{
        @include padding-box(16rpx 16rpx 0 16rpx);
		color: #202536;
		font-size: 28rpx;
    }
    .describe-tab{
        @include padding-box(24rpx 16rpx 16rpx 16rpx);
        display: flex;
        align-items: center;
		justify-content: space-between;
		position: relative;
		width: calc(50vw - 30rpx);
		overflow: hidden;
		min-height: 88rpx;
        .tab-list{
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
        }
        .tab-i{
            margin: 0 12rpx 10rpx 0;
            @include padding-box(8rpx 12rpx);
            background: #F4F4F7;
            color: #565868;
            border-radius: 8rpx;
        }
    }
    .more{
        display: flex;
        align-items: center;
		height: 30rpx;
		position: absolute;
		right: 0;
		bottom: 20rpx;
		background: #fff;
		padding: 20rpx 10rpx;
		box-shadow: 0 0 10rpx 10rpx #fff;
		// z-index: 10;
        .point{
            width: 8rpx;
            height: 8rpx;
            border-radius: 8rpx;
            background-color: rgb(222,223,231);
            float: left;
            margin-right: 8rpx;
        }
    }
}
.post-noimg-active{
    filter: grayscale(1);
}
.life-container {
    width: 350rpx !important;
    padding: 0 0 20rpx 0 !important;
    background-color: #fff !important;
    box-shadow: 0px 8rpx 20rpx 0px rgba(9, 36, 66, 0.04) !important;
    border-radius: 16rpx !important;
    overflow: hidden;
    margin-bottom: 20rpx;
  }
  
  .life-img {
    width: 350rpx !important;
    height: 380rpx !important;
  }
  
  .life-product-contianer {
    padding: 0 10rpx;
    display: flex;
    flex-direction: column;
  }
  
  .life-title {
    margin-left: 10rpx !important;
  }
  
  .tag {
    height: 30rpx !important;
    line-height: 30rpx !important;
  }
  
  .art-content {
    font-size: 28rpx;
    color: #999;
    margin-top: 15rpx;
    display: flex;
    flex-wrap: wrap;
  }
.share-box{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.mask-box{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F4F4F7;
    opacity: 0.86;
    border-radius: 16rpx;
}
.mask-content{
    position: relative;
    height: 100%;
    width: 100%;
    @include padding-box(12rpx);
    opacity: 1;
    .mask-share{
        position: absolute;
        bottom: 74rpx;
        height: 149rpx;
        border-radius: 16rpx;
        background: #ffffff;
        left:50%;
        transform:translateX(-50%);
        width: calc(100% - 24rpx);
        @include padding-box(36rpx 45rpx 36rpx 29rpx);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .facade{
        width: 76rpx;
        height: 76rpx;
        border-radius: 6rpx;
    }
    .share-img{
        width: 25rpx;
        height: 25rpx;
        margin-left: 12rpx;
    }
    .share-name{
        display: flex;
        align-items: center;

        .name{
            font-size: 30rpx;
            color: #202536;
        }
    }
    .mask-close{
        float: right;
        .mask-close-img{
            width: 30rpx;
            height: 30rpx;
        }
    }
}
.no-img{
    width: 333rpx;
    border: 1rpx solid #DEE0E3;
    @include padding-box(0 0 30rpx 0);
    border-radius: 16rpx;
    .top-img{
        width: 329rpx;
        height: 40rpx;
        border-radius: 16rpx 16rpx 0 0;
    }
    .title{
        @include padding-box(0 16rpx);
        color: #202536;
        font-size: 28rpx;
        font-weight: 600;
    }
    .money{
        @include padding-box(0 16rpx);
        font-size: 33rpx;
        color: #FF7642;
        font-weight: bold;
        margin: 12rpx 0 24rpx 0;
    }
    .job-detail{
        @include padding-box(0 16rpx);
    }
    .salary-details-list {
        display: flex;
        align-items: center;
        margin: 10rpx 0;
    }
    .salary-details-spot {
        border-radius: 10rpx;
        width: 7rpx;
        height: 7rpx;
        background-color: #9497B1;
    }
    .salary-details-name {
        font-size: 18rpx;
        color: #565868;
        margin-left: 20rpx;
        flex: 1;
		overflow: hidden;
		line-height: 22rpx;
        text-overflow: ellipsis; // 超出显示'...'
        display: -webkit-box; // 将元素作为弹性伸缩盒子模型显示 。
        -webkit-line-clamp: 2; // 用来限制在一个块元素显示的文本的行数
        -webkit-box-orient: vertical; // 设置或no-img检索伸缩盒对象的子元素的排列方式
    }
}

.no-img-mini{
    width: 76rpx;
    @include padding-box(0 0 3rpx 0);
    border-radius: 6rpx;
    .top-img-mini{
        width: 76rpx;
        height: 19rpx;
        border-radius: 6rpx 6rpx 0 0;
    }
    .title-mini{
        @include padding-box(0 4rpx);
        color: #202536;
        font-size: 6rpx;
        font-weight: 600;
    }
    .money-mini{
        @include padding-box(0 4rpx);
        font-size: 6rpx;
        color: #FF7642;
        font-weight: bold;
        margin: 0 0 2rpx 0;
    }
    .job-detail-mini{
        @include padding-box(0 4rpx);
    }
    .salary-details-list-mini {
        display: flex;
        align-items: center;
        margin: 3rpx 0;
    }
    .salary-details-spot-mini {
        border-radius: 10rpx;
        width: 2rpx;
        height: 2rpx;
        background-color: #9497B1;
    }
    .salary-details-name-mini {
        font-size: 4rpx;
        color: #565868;
        margin-left: 2rpx;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis; // 超出显示'...'
        display: -webkit-box; // 将元素作为弹性伸缩盒子模型显示 。
        -webkit-line-clamp: 2; // 用来限制在一个块元素显示的文本的行数
        -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
    }
}
.bold {
	font-weight: bold;
}